<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scaling Div</title>
  <style>
    body {
      background: #ccc;
      padding: 20px;
      margin:0;
    }

    #content {
      width: 800px;
      height: 400px;
      padding: 20px;
      text-align: center;
      background: white;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
    }

    #wrapper {
      padding: 20px;
      resize: both;
      position: relative;
      background: #666;
      height: 400px;
    }
  </style>
</head>
<body>
<div id="wrapper">
  
  <div id="content">
  
    <h1>I am designed just so.</h1>
  
    <p>My design is intentional. I want to be scaled in such a way that scales the design. No reflows or anything, just straight up scaling. Kinda like SVG.</p>
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Your_Icon" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
      <path d="M89.12,85.757c-4.392-1.602-4.796,2.233-12.704-0.645l-15.48-5.634l15.479-5.635c7.911-2.875,8.31,0.957,12.706-0.643  c1.754-0.639,2.875-3.036,2.234-4.796c-0.639-1.757-1.079-1.595-1.716-3.354c-0.642-1.76-0.201-1.918-0.843-3.675  c-0.639-1.761-3.037-2.876-4.794-2.233c-4.394,1.596-2.238,4.793-10.146,7.672L50,75.498l-23.858-8.684  c-7.909-2.878-5.75-6.076-10.145-7.674c-1.756-0.639-4.153,0.478-4.793,2.237c-0.643,1.755-0.202,1.916-0.84,3.674  c-0.64,1.756-1.081,1.6-1.723,3.355c-0.638,1.76,0.481,4.155,2.238,4.796c4.396,1.599,4.794-2.236,12.704,0.642l15.48,5.634  l-15.48,5.635c-7.909,2.879-8.311-0.959-12.704,0.643c-1.756,0.639-2.875,3.035-2.234,4.795c0.636,1.758,1.076,1.598,1.719,3.354  c0.639,1.757,0.2,1.92,0.836,3.679c0.643,1.758,3.039,2.874,4.798,2.235c4.396-1.602,2.235-4.795,10.144-7.675L50,83.459  l23.857,8.683c7.909,2.883,5.751,6.075,10.146,7.676c1.755,0.638,4.154-0.479,4.795-2.238c0.64-1.756,0.198-1.916,0.842-3.673  c0.639-1.76,1.079-1.599,1.717-3.356C91.999,88.791,90.879,86.394,89.12,85.757z"/>
      <path d="M50,0C36.745,0,26,10.745,26,24v21c0,2.2,1.323,5.221,2.939,6.713l7.121,6.574c1.617,1.492,3.39,4.288,3.939,6.213  s2.8,3.5,5,3.5h10c2.2,0,4.45-1.575,5-3.5s2.322-4.721,3.939-6.213l7.121-6.574C72.678,50.221,74,47.2,74,45V24  C74,10.745,63.255,0,50,0z M38.461,49C34.596,49,32,45.768,32,42.455C32,39.141,35.134,37,39,37s7,2.141,7,5.455  C46,45.768,42.328,49,38.461,49z M50,58c-2,0-3-1-3-3s2-6,3-6s3,4,3,6S52,58,50,58z M61.538,49C57.673,49,54,45.768,54,42.455  C54,39.141,57.134,37,61,37s7,2.141,7,5.455C68,45.768,65.404,49,61.538,49z"/>
      </svg>
    
    <p style="color:red; font-size:5rem;"> ✖ ✖ ✖ </p>
    
  </div>
  
</div>
<script>
  // Get references to the DOM elements using plain JavaScript
  let content = document.getElementById("content");
  let elHeight = content.offsetHeight;
  let elWidth = content.offsetWidth;

  let wrapper = document.getElementById("wrapper");

  // Define a custom resizable function
  function resizable(el, wrapper) {
    let scale;

    function doResize(event) {
      let ui = {
        size: {
          width: wrapper.offsetWidth,
          height: wrapper.offsetHeight,
        },
      };

      scale = Math.min(ui.size.width / elWidth, ui.size.height / elHeight);

      el.style.transform = "translate(-50%, -50%) " + "scale(" + scale + ")";
    }

    // Attach the custom resizable function to the resize event of the wrapper
    wrapper.addEventListener("resize", doResize);

    // Initialize the resize function with starter data
    let starterData = {
      size: {
        width: wrapper.offsetWidth,
        height: wrapper.offsetHeight,
      },
    };
    doResize(starterData);
  }

  // Call the resizable function
  resizable(content, wrapper);

  // resize when window is resized
  window.addEventListener('resize', function () {
  // Call your resizable function with the appropriate arguments
  resizable(content, wrapper);
});
</script>
</body>
</html>
